import React, { Component } from 'react';
import { connect } from 'dva';
import { Form, Input, Button } from 'antd';
import styles from './Login.css';
const FormItem = Form.Item;
class Login extends Component {
  render(){
    const { 
      dispatch,
      form: {
        getFieldDecorator,
        validateFieldsAndScroll
      },
      loading
    } = this.props;
    return (
      <div className={ styles.wrapper }>
        
        <Form className={ styles.form }>
          <h1 style={{ textAlign : 'center'}}>系统登录</h1>
          <FormItem>
            {
              getFieldDecorator("user", {
                rules : [
                  {
                    required : true,
                    message : '用户名不能为空'
                  }
                ]
              })(<Input placeholder="用户名"></Input>)
            }
          </FormItem>
          <FormItem>
            {
              getFieldDecorator("pwd", {
                rules : [
                  {
                    required : true,
                    message : '密码不能为空'
                  }
                ]
              })(<Input type="password" placeholder="密码"></Input>)
            }
          </FormItem>
          <FormItem>
            <Button
              type="danger"
              loading={loading}
              block
              onClick={()=>{
                validateFieldsAndScroll((err, values)=>{
                  if(!err){
                    dispatch({
                      type : "navigation/login",
                      payload : values
                    })
                  }
                })
              }}
            >登录</Button>
          </FormItem>
        </Form>
      </div>
    )
  }
}

export default connect(({ layout }) => ({ layout }))(Form.create()(Login))